<!--  -->
<template>
  <div class='home'>
    <h1>调查问卷结果
    </h1>
    <div class="content">
      <h4>1.性别
      </h4>
      <div class="echart"
        id="mychart"
        :style="myChartStyle">
      </div>
    </div>
    <div class="content">
      <h4>2.年龄</h4>
      <div class="echart"
        id="mychartage"
        :style="myChartStyle">
      </div>
    </div>
    <div class="content">
      <h4>3.是否为独生子女</h4>
      <div class="echart"
        id="surviveAloneChartage"
        :style="myChartStyle">
      </div>
    </div>
    <div class="content">
      <h4>4.老人患有疾病的占比</h4>
      <div class="echart"
        id="diseaseChartage"
        :style="myChartStyle">
      </div>
    </div>
    <div class="content1">
      <h4>5.是否赞成老人居家养老，赞成并说明原因
      </h4>
      <div
        :style="{ height: '400px' }">
        <div class="echart"
          id="endorseChartage"
          :style="myChartStyle">
        </div>
      </div>

      <p class="text"
        v-for="item, index in textList"
        :key="index">
        原因：{{ item }}
      </p>

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { optionSex, optionAge, optionSurvive, optionDisease, optionEndorse } from './echart'
import { getDataApi } from '../../api/backstage'

export default {
  data() {
    return {
      homeNum: 1,
      xData: ['男', '女'], //性别 横坐标
      xAgeData: ['40-50', '50-60'], //年龄 横坐标
      xSurviveData: ['独生子女', '非独生子女'],
      xEndorse: ['赞同', '不赞同'],
      yData: [], // 性别 数据
      yAgeData: [], //年龄 数据
      ySurviveData: [], //独生子女 数据
      yEndorseData: [], //是否赞同 数据
      pieData: [],
      myChartStyle: { float: 'left', width: '600px', height: '400px' }, //图表样式
      textList: [],
      list: [],
    }
  },
  mounted() {
    getDataApi().then((res) => {
      console.log(res)
      res.forEach((item) => {
        if (item.id === '1') {
          this.yData.push(item.items[0].num, item.items[1].num)
        }
        if (item.id === '2') {
          this.yAgeData.push(item.items[0].num, item.items[1].num)
        }
        if (item.id === '3') {
          this.ySurviveData.push(item.items[0].num, item.items[1].num)
        }
        if (item.id === '4') {
          item.items.forEach((item) => {
            let obj = {}
            obj.value = item.num
            obj.name = item.name
            this.pieData.push(obj)
          })
        }
        if (item.id === '5') {
          item.items.forEach((itemA) => {
            if (itemA.id === '10') {
              this.yEndorseData.push(itemA.num)
            }
            if (itemA.id === '11') {
              console.log(itemA)
              this.yEndorseData.push(itemA.num)
            }
            if (itemA.text != null) {
              this.textList.push(itemA.text)
            }
          })
          this.yEndorseData = [...new Set(this.yEndorseData)]
          if (this.yEndorseData.length === 1) {
            this.list = this.yEndorseData
            this.$set(this.yEndorseData, 1, this.yEndorseData[0])
          }
          console.log(this.yEndorseData)
        }
      })
    })
    // 性别
    this.initEcharts()
    // 年龄
    this.ageInitEcharts()
    // 是否为独生子女
    this.surviveInitEcharts()
    // 患有疾病的占比
    this.diseaseEcharts()
    // 是否赞成居家养老
    this.endorseChartage()
  },
  watch: {
    yData(newvalue, old) {
      this.initEcharts()
    },
    yAgeData(newvalue, old) {
      this.ageInitEcharts()
    },
    ySurviveData(newvalue, old) {
      this.surviveInitEcharts()
    },
    yEndorseData(newvalue, old) {
      console.log(newvalue)
      this.endorseChartage()
    },
    pieData(newvalue, old) {
      this.diseaseEcharts()
    },
  },
  methods: {
    ageInitEcharts() {
      optionAge.xAxis.data = this.xAgeData
      optionAge.series[0].data = this.yAgeData
      const myAgeChart = echarts.init(document.getElementById('mychartage'))
      myAgeChart.setOption(optionAge)
    },
    initEcharts() {
      optionSex.xAxis.data = this.xData
      optionSex.series[0].data = this.yData
      const myChart = echarts.init(document.getElementById('mychart'))
      myChart.setOption(optionSex)
    },
    surviveInitEcharts() {
      optionSurvive.xAxis.data = this.xSurviveData
      optionSurvive.series[0].data = this.ySurviveData
      const surviveAloneChartage = echarts.init(document.getElementById('surviveAloneChartage'))
      surviveAloneChartage.setOption(optionSurvive)
    },
    diseaseEcharts() {
      //
      optionDisease.series[0].data = this.pieData
      const diseaseChartage = echarts.init(document.getElementById('diseaseChartage'))
      diseaseChartage.setOption(optionDisease)
    },
    endorseChartage() {
      console.log(this.yEndorseData)
      optionEndorse.xAxis.data = this.xEndorse
      optionEndorse.series[0].data = this.yEndorseData
      const endorseChartage = echarts.init(document.getElementById('endorseChartage'))
      endorseChartage.setOption(optionEndorse)
    },
  },
}
</script>
<style lang='scss' scoped>
.home {
  padding: 10px;

  h1 {
    text-align: center;
  }

  .content {
    border: 2px solid #add8e6;
    height: 450px;
    padding: 0 20px;
    margin: 5px 0;
  }

  .content1 {
    border: 2px solid #add8e6;
    padding: 0 20px;
    margin: 5px 0;

    p {
      display: block;
    }
  }
}
</style>